<template>
  <div :id="chartId" :style="{'height':height}" class="echarts-box" />
</template>

<script>
  // vue
  import {
    defineComponent,
    toRefs,
    onMounted
  } from 'vue'
  // echarts
  import * as echarts from 'echarts'
  // options
  import {
    Line2Data
  } from './Line2'

  export default defineComponent({
    props: {
      chartId: {
        type: String,
        default: 'myId'
      },
      chartData: {
        type: Object,
        default: function () {
          return {}
        }
      },
      height: {
        type: String,
        default: '300px'
      }
    },
    setup(props) {
      const {
        chartId,
        chartData,
        height
      } = toRefs(props)

      onMounted(async () => {
        // 初始化echarts实例
        let myChart = echarts.init(document.getElementById(chartId.value))
        // 绘制图表
        myChart.setOption(Line2Data)

        myChart.setOption({
          xAxis: {
            data: chartData.value.xdata
          },
          series: [{
              data: chartData.value.ydata.map(item=>{return item + 66})
            },
            {
              data: chartData.value.ydata.map(item=>{return item * 2})
            },
            {
              data: chartData.value.ydata.map(item=>{return item + 88})
            },
            {
              data: chartData.value.ydata.map(item=>{return item * 3})
            },
            {
              data: chartData.value.ydata.map(item=>{return item + 100})
            }
          ]
        })

        window.addEventListener('resize', () => {
          myChart.resize();
        })
      })
      return {
        chartId,
        chartData,
        height
      }
    }
  })
</script>

<style lang="scss" scoped>
  .echarts-box {
    width: 100%;
  }
</style>